<template>
	<z-paging ref="paging" v-model="userList" @query="queryList" show-refresher-update-time>
		<template #top>
			<view class="content z-index-99" :style="{'paddingTop':$store.state.statusBarHeight+'px','top':'0'}">
				<view class="title">
					<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30"></text></view>
					<text>{{title}}</text>
				</view>
			</view>
			<view class="gifts bg-fff" :style="{'top': titleTop, 'z-index': '999'}">
				<view :class="['received', ctype == 0? 'current' : '']" @click="changType(0)">我搭的</view>
				<view :class="['sendOut', ctype == 1? 'current' : '']" @click="changType(1)">搭我的</view>
			</view>
		</template>
		
		<template #empty>
			<view class="w-100">
				<view v-if="ctype == 1">
					<text class="position-relative font-bold font30 d-flex"
						style="justify-content: center;align-items: center;top: 405rpx;">您暂时还没有搭别人哟~</text>
					<image class="position-relative" style="top: -84rpx;left: 58rpx;width: 80%;"
						src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/xiaoda.png"></image>
				</view>
		
				<view v-else>
					<text class="position-relative font-bold font30 d-flex"
						style="  justify-content: center;align-items: center;top: 405rpx;">暂时还没有人搭您~</text>
					<image class="position-relative" style="top: -84rpx;left: 58rpx;width: 80%;"
						src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/xiaoda.png"></image>
				</view>
			</view>
		</template>
		
		<view v-if="ctype == 0" class="bg-fff pt-2">
			<view class="d-flex d-flex-middle font-bold px-4" v-if="userList.length!=0">
				<view class="font32 mr-1">我嗒一嗒了</view>
				<view class="font32" style="color: #5DB0FE;">{{total}}</view>
				<view class="font32 mr-1">人</view>
			</view>
			<view class="pl-4 font26 pt-2" v-if="userList.length!=0">解锁喜欢你的人,即刻匹配</view>
			<view class="px-4 mt-2 mb-4 d-flex d-flex-between d-flex-wrap">
				<view class="position-relative span-48 rounded40 mb-2" @click="touser(i.toUid, index)" v-if="userList.length!=0" v-for="(i,index) in userList" :key="i.id" :style="{'background': buddyList[index % 6].topBg,'height': '390rpx', 'overflow': 'hidden'}" >
					<view class="colorfff font24 mt-2 ml-2  px-1 rounded15" style="background: rgba(62, 58, 57, .2); display: inline-block; line-height: 46rpx;">看到你,瞬间被你吸引</view>
						<view class="position-absolute d-flex" :style="{'width': '100%', 'height': '50%', 'background': buddyList[index % 6].bottomBg, 'bottom': '0', 'borderRadius': '30rpx 30rpx 0 0'}">
						<view class="d-flex d-flex-between" style="width: 100%; margin-top: 90rpx;">
							<view class="ml-2">
								<view class="font26 ">30分钟前在线</view>
								<view class="d-flex mt-1">
									<view class="d-flex-btn" style="background: #B73DE3; padding: 0 8rpx 0 8rpx; border-radius: 10rpx 0 0 10rpx;">
										<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203178.png" style="width: 26rpx; height: 18rpx;"></image>
									</view>
									<view class="font22" style="background: #ec92d0; color: #B73DE3; padding: 6rpx 12rpx 4rpx 6rpx; border-radius: 0 10rpx 10rpx 0;">最强王者</view>
								</view>
							</view>
							<view class="d-flex-column d-flex-middle" style="margin-top: 20rpx;">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202768.png" style="width: 46rpx; height: 46rpx;"></image>
								<text class="font20 font-bold">{{i.personalityType}}</text>
							</view>
							<view class="mt-2 mr-1">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202778.png" style="width: 50rpx; height: 45rpx;"></image>
							</view>
						</view>
						<image 
							class="position-absolute rounded" 
							:src="i.avatar" 
							style="width: 160rpx; height: 160rpx; z-index: 2; left: 50%; top: -30rpx; transform: translate(-50%, -50%); border: 1px solid #fff;"
							:style="$store.state.user.accountType==1 && index !== 0 && index !== 1? 'filter: blur(15rpx)' : ''"
							></image>
						 <view 
							class="font26 d-flex d-flex-middle d-flex-center"
							style="width: 100%; position: absolute; top: 53rpx;"
							:style="$store.state.user.accountType==1 && index !== 0 && index !== 1? 'filter: blur(5rpx)' : ''"
						>{{ i.nickname }}</view>
						<view class="sex" style="position: absolute;bottom: 140rpx;right: 93rpx; z-index: 100;">
							<image v-if="i.gender==2" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png"></image>
							<image v-if="i.gender==1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%94%B7.png"></image>
						</view>
					</view>
				</view>
				<view v-if="userList.length!=0&&$store.state.user.accountType==1"  class="z-index-100 linerbg colorfff position-fixed rounded50 d-flex-btn font32" style="left: 50%; transform: translateX(-50%); bottom: 120rpx; width: 80%; height: 100rpx;" @click="tomember">解锁全部嗒一嗒我的人</view>
				
			</view>
		</view>
		<view v-if="ctype == 1" class="bg-fff pt-2">
			<view class="d-flex d-flex-middle font-bold px-4" v-if="userList.length!=0">
				<view class="font32" style="color: #5DB0FE;">{{total}}</view>
				<view class="font32 mr-1">人嗒一嗒了我</view>
			</view>
			<view class="pl-4 font26 pt-2" v-if="userList.length!=0" >解锁喜欢你的人,即刻匹配</view>
			<view class="px-4 mt-2 mb-4 d-flex d-flex-between d-flex-wrap">
				<view class="position-relative span-48 rounded40 mb-2"  @click="touser(i.fromUid, index)" v-if="userList.length!=0" v-for="(i,index) in userList" :key="i.id" :style="{'background': buddyList[index % 6].topBg,'height': '390rpx', 'overflow': 'hidden'}">
					<view class="colorfff font24 mt-2 ml-2  px-1 rounded15" style="background: rgba(62, 58, 57, .2); display: inline-block; line-height: 46rpx;">{{titles}}</view>
						<view class="position-absolute d-flex" :style="{'width': '100%', 'height': '50%', 'background': buddyList[index % 6].bottomBg, 'bottom': '0', 'borderRadius': '30rpx 30rpx 0 0'}" >
						<view class="d-flex d-flex-between" style="width: 100%; margin-top: 90rpx;">
							<view class="ml-2">
								<view class="font26 ">30分钟前在线</view>
								<view class="d-flex mt-1">
									<view class="d-flex-btn" style="background: #B73DE3; padding: 0 8rpx 0 8rpx; border-radius: 10rpx 0 0 10rpx;">
										<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203178.png" style="width: 26rpx; height: 18rpx;"></image>
									</view>
									<view class="font22" style="background: #ec92d0; color: #B73DE3; padding: 6rpx 12rpx 4rpx 6rpx; border-radius: 0 10rpx 10rpx 0;">最强王者</view>
								</view>
							</view>
							<view class="d-flex-column d-flex-middle" style="margin-top: 20rpx;">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202768.png" style="width: 46rpx; height: 46rpx;"></image>
								<text class="font20 font-bold">{{i.personalityType}}</text>
							</view>
							<view class="mt-2 mr-1">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202778.png" style="width: 50rpx; height: 45rpx;"></image>
							</view>
						</view>
						<image 
							class="position-absolute rounded" 
							:src="i.avatar" 
							style="width: 160rpx; height: 160rpx; z-index: 2; left: 50%; top: -30rpx; transform: translate(-50%, -50%); border: 1px solid #fff;"
							:style="$store.state.user.accountType==1 && index !== 0 && index !== 1? 'filter: blur(15rpx)' : ''"
						></image>
						  <view 
							class="font26 d-flex d-flex-middle d-flex-center" 
							style="width: 100%; position: absolute; top: 53rpx;"
							:style="$store.state.user.accountType==1 && index !== 0 && index !== 1? 'filter: blur(5rpx)' : ''"
						>{{ i.nickname }}</view>
						<view class="sex" style="position: absolute;bottom: 140rpx;right: 93rpx; z-index: 100;">
							<image v-if="i.gender==2" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png"></image>
							<image v-if="i.gender==1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%94%B7.png"></image>
						</view>
					</view>
				</view>
				<view v-if="userList.length!=0&&$store.state.user.accountType==1"  class="z-index-100 linerbg colorfff position-fixed rounded50 d-flex-btn font32" style="left: 50%; transform: translateX(-50%); bottom: 120rpx; width: 80%; height: 100rpx;" @click="tomember">解锁全部喜欢我的人</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import store from '@/store/index.js';
	import TitleBarVue from '../../components/TitleBar.vue';
	import { DaziApi } from '../../http/Dazi';
	export default {
		data() {
			return {
				ctype: 0,
				title: '心动信号',
				cardLoading: true,
				userList:[],
				total: null,
				titles: '看到你,瞬间被你吸引',
				buddyList: [
					{
						id: 0,
						// #ifdef APP-PLUS
						topBg: 'linear-gradient(90deg, #D951C6 1%, #FB9AB0 100%)',
						bottomBg: 'linear-gradient(180deg, #FFCDF7 1%, #FB9AB0 100%)',
						// #endif
						// #ifdef MP-WEIXIN
						topBg: 'linear-gradient(90deg, #D951C6 1%, #FB9AB0 100%);',
						bottomBg: 'linear-gradient(180deg, #FFCDF7 1%, #FB9AB0 100%);',
						// #endif
						title: '看到你,瞬间被你吸引',
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203402.png'
					},
					{
						id: 1,
						// #ifdef APP-PLUS
						topBg: 'linear-gradient(90deg, #5DB0FE 1%, #86F5C9 100%)',
						bottomBg: 'linear-gradient(180deg, #86F5C9 1%, #86F5C9 100%)',
						// #endif
						// #ifdef MP-WEIXIN
						topBg: 'linear-gradient(90deg, #5DB0FE 1%, #86F5C9 100%);',
						bottomBg: 'linear-gradient(180deg, #86F5C9 1%, #86F5C9 100%);',
						// #endif
						title: '看到你,瞬间被你吸引',
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203402.png'
					},
					{
						id: 2,
						// #ifdef APP-PLUS
						topBg: '#FFCC7B',
						bottomBg: 'linear-gradient(180deg, #FEE080 1%, #FEE080 100%)',
						// #endif
						// #ifdef MP-WEIXIN
						topBg: '#FFCC7B;',
						bottomBg: 'linear-gradient(180deg, #FEE080 1%, #FEE080 100%);',
						// #endif
						title: '看到你,瞬间被你吸引',
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203402.png'
					},
					{
						id: 3,
						// #ifdef APP-PLUS
						topBg: 'linear-gradient(90deg, #5DB0FE 0%, rgba(93,176,254,0.8) 1%, #E8BAFC 100%)',
						bottomBg: 'linear-gradient(180deg, #5DB0FE 0%, rgba(93,176,254,0.8) 1%, #EFEFEF 100%)',
						// #endif
						// #ifdef MP-WEIXIN
						topBg: 'linear-gradient(90deg, #5DB0FE 0%, rgba(93,176,254,0.8) 1%, #E8BAFC 100%);',
						bottomBg: 'linear-gradient(180deg, #5DB0FE 0%, rgba(93,176,254,0.8) 1%, #EFEFEF 100%);',
						// #endif
						title: '看到你,瞬间被你吸引',
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203402.png'
					},
					{
						id: 4,
						// #ifdef APP-PLUS
						topBg: '#D83F7D',
						bottomBg: 'linear-gradient(180deg, #FFCDF7 1%, #FB9AB0 100%)',
						// #endif
						// #ifdef MP-WEIXIN
						topBg: '#D83F7D;',
						bottomBg: 'linear-gradient(180deg, #FFCDF7 1%, #FB9AB0 100%);',
						// #endif
						title: '看到你,瞬间被你吸引',
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203402.png'
					},
					{
						id: 5,
						// #ifdef APP-PLUS
						topBg: '#63C6B3',
						bottomBg: 'linear-gradient(180deg, #86F5C9 1%, #86F5C9 100%)',
						// #endif
						// #ifdef MP-WEIXIN
						topBg: '#63C6B3;',
						bottomBg: 'linear-gradient(180deg, #86F5C9 1%, #86F5C9 100%);',
						// #endif
						title: '看到你,瞬间被你吸引',
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203402.png'
					}
				]
			}
		},
		components: {TitleBarVue},
		methods: {
			async queryList(pageNo, pageSize) {
				const res = await DaziApi.queryMatch({
					pageIndex: pageNo,
					pageSize: pageSize,
					selfFlag: this.ctype == 1? false : true
				});
				this.total = res.total
				this.$refs.paging.complete(res.records);
			},
			touser(id, index){
				console.log(id, this.$store.state.user.accountType , index);
				if(index == 0 || index == 1) {
					uni.navigateTo({
					    url: `/pagesMain/HomePage/HomePage?id=${id}`
					});
					return
				} else {
					if(this.$store.state.user.accountType != 1) {
						uni.navigateTo({
						    url: `/pagesMain/HomePage/HomePage?id=${id}`
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: '请解锁后再查看哦~',
							duration: 1500,
							position: 'bottom'
						})
					}
				}
			},
			tomember(){
				uni.navigateTo({
					url: '/pagesMain/member/member'
				})
			},
			changType(type){
				this.ctype = type
				this.cardLoading = true;
				this.$refs.paging.reload();
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		computed: {
			titleTop() {
				return this.$store.state.statusBarHeight + 40 + 'px'
			}
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #fff;
	overflow: hidden;
	.content {
		width: 100%;
		background-color: #fff !important;
	}
	.bluricon {
		filter: blur(6px);
	}
	.blurname {
		filter: blur(4px);
		margin-bottom: 4rpx;
		color: #231815;
		font-size: 30rpx;
	}
	.JoinInList {
		width: 730rpx;
		margin: 270rpx auto 0;
		border-radius: 50rpx;
		background-color: #fff;
		overflow: hidden;
		padding-bottom: 10rpx;
		.item {
			width: 700rpx;
			height: 150rpx;
			margin: 30rpx auto;
			background-color: #f5f5f5;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.info {
				display: flex;
				margin-left: 20rpx;
				.icon {
					position: relative;
					image {
						width: 152rpx;
						height: 152rpx;
					}
					.sex {
						position: absolute;
						bottom: 20rpx;
						right: 20rpx;
						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
				.detailed {
					display: flex;
					flex-direction: column;
					justify-content: center;
					.name {
						margin: 10rpx 0 4rpx;
						color: #231815;
						font-weight: 700;
						font-size: 30rpx;
					}
					.desc {
						color: #595757;
						font-size: 22rpx;
					}
				}
			}
			.btn {
				width: 150rpx;
				height: 60rpx;
				border-radius: 30rpx;
				color: #fff;
				margin-right: 50rpx;
				background: linear-gradient( 90deg, #ED65CE 0%, #E966CF 2%, #859BF0 69%, #5DB0FE 99%);
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					width: 21.23rpx;
					height: 20.16rpx;
				}
			}
		}
	}
}
.title {
	display: flex;
	align-items: center;
	font-weight: 700;
	height: 80rpx;
	.goback {
		image {
			margin-left: 50rpx;
			width: 20rpx;
			height: 30rpx;
		}
	}
	text {
		flex: 1;
		margin-right: 50rpx;
		font-size: 34rpx;
		text-align: center;
	}
}
.pt-270 {
	padding-top: 300rpx;
}
.sex {
	position: absolute;
	bottom: 25rpx;
	right: 25rpx;
	image {
		width: 30rpx;
		height: 30rpx;
	}
}
.gifts {
	width: 100%;
	padding: 30rpx 0 15rpx 0;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #9B9B9B;
	font-size: 34rpx;
	.received,.sendOut {
		padding: 10rpx 18rpx;
		border-radius: 20px;
		margin-right: 40rpx;
		font-size: 30rpx;
	}
	.sendOut {
		margin-left: 40rpx;
		margin-right: 0;
		font-size: 30rpx;
	}
	.current {
		background: linear-gradient(to right, #EC69CF, #60AFFE);
		margin-left: 20rpx;
		padding: 10rpx 30rpx;
		font-size: 30rpx;
		color: #fff;
	}
}
.content {
	width: 100%;
	background-color: #fff !important;
}
.content .title {
	display: flex;
	align-items: center;
	height: 80rpx;
	padding-right: 47rpx;
	border-bottom: 1px solid rgba(204, 204, 204, .2);
}
.content .title text {
	flex: 1;
	font-size: 32rpx;
	text-align: center;
	font-weight: normal;
}
</style>